<template>
<div class="box">
<!-- 右1中box -->
  <HerinContainer class="MainCoal-box" :delay="1" direction="Right" title="采煤机分析">
    <template #content>
      <!-- 截割轨迹分析 -->
      <div class="MainCoal-box-content">
        <div style="color:#ADADAD;font-size:0.875rem">截割轨迹分析</div>
        <div class="outage">
          <CoalCuttingChart x="key" y="value" :data="CoalChartdata" id="id" :color="['#00FDFF', '#34C8FF']" unit="(m)"/>
        </div>
      </div>
      <!-- 采高分析 -->
      <div>
        <div class="center-select" style="color:#ADADAD;font-size:0.875rem">采高分析</div>
        <div class="outageList">
          <TrackChart  x="key" y="value" :data="cutrateData" id="采高高度" :color="['#FFD101', '#00FDFF', '#34C8FF',]" unit="(m)"/>
        </div>
      </div>
    </template>
  </HerinContainer>
</div>
</template>
<script>
import HerinContainer from '@/components/HerinContainer';
import TrackChart from '@/components/chart/line/TrackChart.vue';
import CoalCuttingChart from '@/components/chart/line/CoalCuttingChart.vue';
import { cutAnalysis, rollerTrack } from '../common/titles';

export default {
  components: {
    HerinContainer,
    TrackChart,
    CoalCuttingChart
  },
  data() {
    return {
      cutAnalysisdata: cutAnalysis.seconddata,
      CoalCuttingChartdata: rollerTrack.seconddata
      // rollerTrackdata: [
      //   { x: '07-25 00:00', y: 40, s: '当前支架' },
      //   { x: '07-25 02:00', y: 150, s: '当前支架' },
      //   { x: '07-25 04:00', y: 45, s: '当前支架' },
      //   { x: '07-25 06:00', y: 145, s: '当前支架' },
      //   { x: '07-25 08:00', y: 45, s: '当前支架' },
      //   { x: '07-25 10:00', y: 150, s: '当前支架' },
      //   { x: '07-25 12:00', y: 50, s: '当前支架' },
      //   { x: '07-25 12:00', y: 80, s: '当前支架' },
      //   { x: '07-25 14:00', y: 80, s: '当前支架' },
      //   { x: '07-25 16:00', y: 80, s: '当前支架' },
      //   { x: '07-26 00:00', y: 80, s: '当前支架' },
      //   { x: '07-26 02:00', y: 145, s: '当前支架' },
      //   { x: '07-26 04:00', y: 50, s: '当前支架' },
      //   { x: '07-26 06:00', y: 150, s: '当前支架' },
      //   { x: '07-26 10:00', y: 40, s: '当前支架' },
      //   { x: '07-26 12:00', y: 150, s: '当前支架' }
      // ],
      // rollerTrackdata1: [
      //   { x: 1, y: 2.7, s: '支架高度' },
      //   { x: 30, y: 3, s: '支架高度' },
      //   { x: 50, y: 2.7, s: '支架高度' },
      //   { x: 70, y: 3.1, s: '支架高度' },
      //   { x: 100, y: 2.9, s: '支架高度' },
      //   { x: 130, y: 3, s: '支架高度' },
      //   { x: 150, y: 3.2, s: '支架高度' },
      //   { x: 1, y: 2.5, s: '顶刀高度' },
      //   { x: 30, y: 2.3, s: '顶刀高度' },
      //   { x: 50, y: 2.4, s: '顶刀高度' },
      //   { x: 70, y: 2.6, s: '顶刀高度' },
      //   { x: 100, y: 2.4, s: '顶刀高度' },
      //   { x: 130, y: 2.5, s: '顶刀高度' },
      //   { x: 150, y: 2.6, s: '顶刀高度' },
      //   { x: 1, y: 1.5, s: '底刀高度' },
      //   { x: 30, y: 1.3, s: '底刀高度' },
      //   { x: 50, y: 1.4, s: '底刀高度' },
      //   { x: 70, y: 1.6, s: '底刀高度' },
      //   { x: 100, y: 1.4, s: '底刀高度' },
      //   { x: 130, y: 1.5, s: '底刀高度' },
      //   { x: 150, y: 1.6, s: '底刀高度' }
      // ]
    };
  },
  mounted() {
    console.log(this.CoalChartdata);
  },
  computed: {
    cutrateData() {
      const list = [...this.cutAnalysisdata].map(item => {
        return {
          s: ['支架高度', '顶刀高度', '底刀高度'],
          value: Number(item.value),
          key: item.key
        };
      });
      return list;
    },
    CoalChartdata() {
      const list = [...this.CoalCuttingChartdata].map(item => {
        return {
          value: Number(item.height),
          key: item.time
        };
      });
      return list;
    }
  },
  methods: {
    // 点击传感器当前支架监测tab  右中
    // clickTwoTitleTab(item) {
    //   this.isTwobtn = item;
    //   if (item === '采高') {
    //     this.Twolist = 'content';
    //     this.Twocount = '';
    //   } else if (item === '截割轨迹') {
    //     this.Twolist = '';
    //     this.Twocount = 'content';
    //   }
    // }
  }
};
</script>
<style lang="scss" scoped>
.MainCoal-box {
  margin-bottom: .625rem;
  // &-tab {
  //   display: flex;
  //   .btn {
  //     @include btn;
  //   }
  //   .isbtn {
  //     background-color: rgba(0, 228, 255, 0.2);
  //     color: $cyan;
  //   }
  // }
  &-content {
    .mouldbox {
      margin-top: 1.875rem;
    }
    .mouldbox:first-child {
      margin-top: 0.3125rem;
    }
  }
  .num {
    font-size: 16px;
    text-align: right;
    font-family: Helvetica-bold;
    font-weight: 900;
  }
  .piece {
    color: rgba(131, 131, 131, 100);
    font-size: 12px;
    text-align: left;
    font-family: Helvetica-regular;
    margin: 0 0.9375rem 0 0.3125rem;
    display: inline;
  }
  .sensorSum {
    display: flex;
    width: 20.625rem;
    height: 2.5rem;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    padding: 0 0.625rem;
    p {
      display: flex;
      align-items: center;
    }
    .sum {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
      text-align: left;
      font-family: Helvetica-regular;
    }
  }
  .charttitle {
    font-size: 0.75rem;
    color: $light2Grey;
    margin: 0.625rem 0;
  }
  .outage,.outageList {
    height: 9.375rem;
  }
}
</style>
